<script setup lang="ts">
const items = [
  {
    name: "lj",
    src: "https://img95.699pic.com/photo/50113/3339.jpg_wh300.jpg!/fh/300/quality/90",
    title: "这是lj.png"
  },
  {
    name: "logo",
    src: "https://img3.qianzhan.com/news/201711/09/20171109-0afb8025adbe369d_600x5000.jpg",
    title: "这是logo.png"
  },
  {
    name: "bg",
    src: "https://ts1.cn.mm.bing.net/th/id/R-C.975f47e7671b58bd4410d9f049bfcba0?rik=E7fhGIZlVC3yzQ&riu=http%3a%2f%2fjiedangj.com%2fupfiles%2f5f8fa90fe4a82.jpg&ehk=qHsf05qgMbQf2BfyJK%2blODgAU95XOJOxVVCRXrOEWSM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
    title: "这是bg.png"
  },
]

import DlgOrderCreate from "./DlgorderCreate.vue";
import {ref} from 'vue'


const dlgCreateOrEdit = ref<InstanceType<typeof DlgOrderCreate>>()

</script>

<template>
  <div class="banner">
    <el-carousel :interval="5000" arrow="always" height="600px">
      <el-carousel-item v-for="item in items" :key="item.name">
        <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="company-list">
    <div class="textile">家政服务公司列表</div>
    <el-space wrap>
      <el-card v-for="i in 6" :key="i" class="box-card">
        <template #header>
          <div class="card-header">
            <span>{{ i }}家政服务公司</span>
            <el-button class="button" text @click="() => dlgCreateOrEdit?.initAndShow()">下单服务</el-button>
          </div>
        </template>
        <div>
          <img class="cImg"
               src="https://ts1.cn.mm.bing.net/th/id/R-C.5ef5246dd3967fc5075e14c50fd9b3db?rik=HbyAPKHx99fnhQ&riu=http%3a%2f%2fwww.gaomei.cn%2fUploadFiles%2fclean%2f2017%2f12%2f201712061144077135.jpg&ehk=54bMmdu8KpBjuXNMdtcfmwMEYOO8FzvQP2T2gLUckiA%3d&risl=&pid=ImgRaw&r=0"
               alt=""/>
          <span>
            家政服务是指将部分家庭事务社会化、职业化、市场化，属于民生范畴。由社会专业机构、社区机构、非盈利组织、家政服务公司和专业家政服务人员来承担，帮助家庭与社会互动，构建家庭规范，提高家庭生活质量，以此促进整个社会的发展。2019年2月20日，在召开的国务院常务会议提出，促进家政服务扩容提质，并从促进家政服务企业进社区、推进家政服务标准化等四个方面明确了具体措施 {{
              i
            }} 。6月26日，国务院办公厅印发《国务院办公厅关于促进家政服务业提质扩容的意见》。
          </span>
        </div>
      </el-card>
    </el-space>
  </div>
  <dlg-order-create ref="dlgCreateOrEdit"/>
</template>

<style scoped>
.banner {
  margin-bottom: 200px;
  margin-top: 20px;
}

.company-list {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.textile {
  font-size: xx-large;
  margin-bottom: 30px;
}

.el-space {
  align-self: center;
  margin-left: 60px;
}

.box-card {
  width: 500px;
  height: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


</style>